<template>
	<view class="register">
		<image src="../../../static/image/登录背景@2x.png" mode="widthFix"></image>
		<view class="content">
			<view class="row-input">
				<image src="../../../static/image/商户名称@2x.png" mode="widthFix"></image>
				<input placeholder="请输入商户名称" v-model="shopInfo.shopName" maxlength="110" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/所属行业@2x.png" mode="widthFix"></image>
				<uni-data-select v-model="shopInfo.type" :localdata="range" @change="change"></uni-data-select>
			</view>
			<view class="row-input">
				<image src="../../../static/image/地址@2x.png" mode="widthFix"></image>
				<input placeholder="请输入商户地址" v-model="shopInfo.address" maxlength="100" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/姓名@2x.png" mode="widthFix"></image>
				<input placeholder="请输入姓名" v-model="shopInfo.userName" maxlength="100" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/手机号@2x.png" mode="widthFix"></image>
				<input placeholder="请输入手机号" v-model="shopInfo.phoneNumber" maxlength="11" />
			</view>
			<view class="row-input">
				<image src="../../../static/image/验证码@2x.png" mode="widthFix"></image>
				<input placeholder="请输入验证码" v-model="shopInfo.code" maxlength="8" />
				<!-- <view class="code" :class="{forhidden: counter > 0}" @click="getCode">
					<text> {{ counter > 0 ? counter+ 'S后重新获取' : '获取验证码' }}</text>
				</view> -->
				<view class="yzminner" @click="sendCode" v-if="!verificationTime">
					获取验证码
				</view>
				<view class="yzminner" v-if="verificationTime">
					重新获取{{verificationTime}}s
				</view>
			</view>
			<view class="register-btn" @click="registerFun">立即注册</view>
			<!-- <view class="tip-link">
				<checkbox :checked="true" style="transform: scale(0.6);" color="var(--primary-color)" />
				<text>我同意并接受</text>
				<text class="link">《虚拟店长服务协议》</text>
			</view> -->
			<view class="rule" style="margin-left: 5%;">
				<uni-data-checkbox multiple v-model="checkbox" :localdata="hobby">《虚拟店长服务协议》</uni-data-checkbox>
				<text class="ruleInfo" style="color: #0091ff;" @click="jumpRuleFun">《虚拟店长服务协议》</text>
			</view>
			<view class="bottom">
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		useCountDown
	} from '@/hooks/useCountDown'
	const {
		counter,
		startCountDown
	} = useCountDown()
	const {
		Theme,
		onShow
	} = useTheme()
	const {
		proxy
	} = getCurrentInstance()
	const value = ref(-1)
	const range = ref([{
		value: 1,
		text: "餐饮"
	}])
	const verificationTime = ref('')
	const timer = ref('')
	const msgOrderNo = ref('')
	let shopInfo = ref({
		shopName: '',
		userName: '',
		address: '',
		type: '',
		phoneNumber: '',
		code: ''
	})
	const checkbox = ref(-1)
	const hobby = ref([{
		text: '已阅读并同意',
		value: 0
	}])

	onLoad(() => {

	})

	onShow(() => {

	})
	const navTo = path => {
		proxy.sjuNav.navigateTo(path)
	}
	const change = (e) => {
		console.log("e:", e);
		// if(e==0){
		shopInfo.value.type = e
		//}
	}
	const getCode = () => {
		if (counter.value > 0) {
			proxy.sjuAlert.showInfo('验证码已发送')
		} else {
			startCountDown(60)
		}
	}
	const verificationDown = () => {
		console.log(123)
		// 设置定时器
		timer.value = setInterval(() => {
			verificationTime.value = verificationTime.value - 1
			if (verificationTime.value < 10) verificationTime.value = '0' + verificationTime.value
			if (verificationTime.value <= 0) {
				// 清除定时器
				clearInterval(timer.value)
				verificationTime.value = ''
			}
		}, 1000)
	}
	const sendCode = () => {
		console.log(shopInfo.value.phoneNumber)

		let myreg = /^[1]\d{10}$/;
		if (!myreg.test(shopInfo.value.phoneNumber)) {
			proxy.sjuAlert.showInfo('请输入移动手机号', 2000)
		} else {
			verificationTime.value = 60
			verificationDown()
			proxy.sjuRequest.request("/api/weixin/sendCode/" + proxy.sjuConfig.appInfo.appId, 'post', {
				"mobile": shopInfo.value.phoneNumber
			}).then(res => {
				console.log(res)
				if (res.code == "0000") {
					msgOrderNo.value = res.msgOrderNo;
				} else {
					proxy.sjuAlert.showError("验证码发送失败");
				}
			})
		}
	}
	const registerFun = () => {
		
		console.log(shopInfo.value.type)
		//检查非空数组:
		let checkNullArr = [{
			val: shopInfo.value.shopName,
			msg: '请输入商户名称'
		}, {
			val: shopInfo.value.address,
			msg: '请输入商户地址'
		}, {
			val: shopInfo.value.userName,
			msg: '请输入姓名'
		}, {
			val: shopInfo.value.type,
			msg: '请选择所属行业'
		}, {
			val: shopInfo.value.phoneNumber,
			msg: '请输入手机号'
		}, {
			val: shopInfo.value.code,
			msg: '请输入验证码'
		}];

		console.log(shopInfo.value.shopName,shopInfo.value.address,shopInfo.value.userName)
	

		if (proxy.sjuBase.checkArrayNotNull(checkNullArr)) {
			if (checkbox.value == -1) {
				proxy.sjuAlert.showError("虚拟店长服务协议");
				return false;
			}

			proxy.sjuRequest.request("/api/shanghu/register/" + proxy.sjuConfig.appInfo.appId, 'post', {
				"mobile": shopInfo.value.phoneNumber,
				"name": shopInfo.value.userName,
				"sendCode": shopInfo.value.code,
				"msgOrderNo": msgOrderNo.value,
				"address": shopInfo.value.address,
				"merchantType": shopInfo.value.type
			}).then(res => {
				console.log(res)
				if (res.code == "0000") {
					proxy.sjuAlert.showInfo("注册成功");
					proxy.sjuLogin.saveValue("xndz_mobile", shopInfo.value.phoneNumber);
					proxy.sjuNav.navigateTo("/intake/login");
				} else if (res.code == "0001") {
					proxy.sjuAlert.showError(res.msg);
					proxy.sjuNav.switchTab("/tab/my");
				} else {
					proxy.sjuAlert.showError("验证码错误");
				}
			})

		}

	}
</script>

<style lang="scss">
	.register {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;

		.rule {
			// display: flex;
			// flex-direction: row;
			// margin-right: auto;
			position: relative;

			.ruleInfo {
				position: absolute;
				top: 3px;
				left: 200rpx
			}
		}

		image {
			width: 100%
		}

		::v-deep .uni-select {
			border: none;
			padding-left: 20px;
		}

		::v-deep .uni-select__input-placeholder {
			font-size: 14px;
		}

		::v-deep uni-input {
			color: #0b0a34 !important;
		}
	}



	.content {
		padding: 40rpx;
		width: 94%;
		height: 520px;
		background: #FFFFFF;
		border-radius: 20rpx;
		// margin:0 3%;
		// margin-top:-20%;
		// z-index: 999;
		position: absolute;
		top: 50%;
		left: 3%;
		transform: translateY(-30%);

		.row-input {
			margin: 30rpx 0rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 0 20rpx;
			height: 90rpx;
			border: none;
			border-radius: 40rpx;
			background-color: #f6f7fb;

			image {

				width: 40rpx;

				flex-shrink: 0;
			}

			.iconfont {
				color: #d9d8dd;
				padding: 0rpx 10rpx 0rpx 10rpx;
				flex-shrink: 0;
				font-size: 40rpx;
			}

			input {
				flex: 1;
				font-size: 30rpx;
				padding: 0rpx 40rpx;
				color: #d9d8dd;
				// border-left: 3rpx solid var(--primary-color);
			}

			.code {
				display: flex;
				justify-content: flex-end;
				letter-spacing: 2rpx;
				width: 200rpx;
				color: #46aefd;
			}

			.forhidden {
				color: #CCCCCC;
			}

			.yzminner {
				padding: 0 5px;
				color: #0091ff;
				// background: ;
			}
		}

		.register-btn {
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 35rpx;
			height: 100rpx;
			margin: 40rpx 0 40rpx 0;
			border-radius: 50rpx;
			color: #FFFFFF;
			background-image: linear-gradient(to right, #1b196f, #0b0a34);
		}

		.tip-link {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			letter-spacing: 4rpx;
			font-size: 28rpx;

			.link {
				color: var(--primary-color);
			}

		}
	}

	.bottom {
		width: 100%;
		height: 50px;
	}
</style>